<template>
	<view :style="{height:windowHeight+'px'}">
		
			<uni-nav-bar  :fixed="true" shadow  status-bar  title="知识库"   right-icon="settings-filled" @clickRight="showDrawer('showRight')" />
			<uni-section padding="0 10px" title="">
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" />
						<uni-search-bar placeholder="输入关键字进行搜索" bgColor="#F3F3F3" @confirm="search" />
				</view>
				<view class="content" v-if="current === 0">
					
					<uni-card  :isFull="true" v-for="(item,index) in 5">
						<view>
							<view class="flex-b">
								<view>
									<image src="../../static/icon/wuping.png" mode=""></image>
								</view>
								<view class="padding5">
									<view class="titleSpan">耗材养护统计分析详情</view>
									<view>统计分析-巡检统计-……</view>
									<view>超级管理员 2023-12-31 14:30</view>
									<view><uni-tag :inverted="true" type="primary"  text="养护导出"></uni-tag></view>
								</view>
							</view>
							<view class="flexb">
								<text>查看详情</text>
								<text> > </text>
							</view>
						</view>
					</uni-card>
					<view style="height: 4rem;"></view>
				</view>	
				<view class="content" v-if="current === 1">
					
					<uni-card  :isFull="true" v-for="(item,index) in 5" @click="detail()">
						<view>
							<view class="flex-b1">
								<view class="imageC">
									<image src="../../static/menu/gaojing.png" mode=""></image>
								</view>
								<view class="padding5">
									<view class="titleSpan">耗材养护统计分析详情</view>
									<view>超级管理员 2023-12-31 14:30</view>
								</view>
								<view>
									>
								</view>
							</view>
						</view>
					</uni-card>
				</view>
				<uni-drawer ref="showRight" mode="right" :mask-click="false" @change="change($event,'showRight')">
					<view class="scroll-view">
						<scroll-view class="scroll-view-box" scroll-y="true">
							<view class="close">
								<view>
									<uni-notice-bar scrollable single text="请筛选需要查看的信息"></uni-notice-bar>
								</view>
							</view>
							<view class="info-content" v-for="(item,index) in shaiList" :key="item">
								<view class="flex-b2">
									<image style="width: 1.8rem;height: 1.8rem;" src="../../static/icon/house.png" mode=""></image>
									<text class="ml5">{{item.name}}</text>
									<text class="numStyle ml5">({{index+1}})</text>
								</view>
							</view>
							<view class="close">
								<button  @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></button>
							</view>
						</scroll-view>
					</view>
				</uni-drawer>
			</uni-section>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				windowHeight: 700,
				items: ['知识库', '经验库'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'text',
				shaiList:[
					{id:0,name:'安全'},
					{id:1,name:'设备维护'},
					{id:2,name:'管网维护'},
					{id:3,name:'软件使用'},
					{id:4,name:'其他'},
					]
			
			}
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync();
			this.windowHeight = sysInfo.windowHeight;
			 
		},
		computed: {
			// 使用计算属性将 menuList 数据分割成每个 swiper-item 中的子数组
		
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//选项卡选择
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			//查看详情
			detail(e) {
				uni.navigateTo({
					url:'/pages/zhishi/detail'
				})
			},
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
				// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			
		},
		onNavigationBarButtonTap(e) {
			if (this.showLeft) {
				this.$refs.showLeft.close()
			} else {
				this.$refs.showLeft.open()
			}
		},
		
		
		
	}
</script>

<style lang="scss" scoped>
	.content {
		.uni-card{
			margin: 0.8rem 0 !important;
		}
		.ml5{
			margin-left: 1rem;
		}
		padding: 20rpx 0;

		.flex-b{
			
			display: flex;
			image{
				width:6rem;
				height:6rem;
			}
		}
		.flexb{
			display: flex;
			align-items: center;
			justify-content: space-between;
			
		}
	
		.padding5{
			width: 80%;
			padding: 0.5rem;
			view{
				line-height:1.5rem;
			}
			.titleSpan{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 1rem;
				color: #222222;
			}
		}
		.flex-b1{
			
			display: flex;
			view:nth-of-type(1){
				flex: 2;
			}
			view:nth-of-type(2){
				flex: 9;
			}
			view:nth-of-type(3){
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.imageC{
				display: flex;
				align-items: center;
			}
			image{
				width:3rem;
				height:3rem;
			}
			
			
			
			
			
		}
	
	}
	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex:1
	}
	// 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.info {
		padding: 15px;
		color: #666;
	}
	
	.info-text {
		font-size: 14px;
		color: #666;
	}
	.info-content {
		padding: 5px 15px;
	}
	.close {
		padding: 10px;
	}
	.flex-b2{
		display: flex;
		align-items: center;
	}	
	.ml5{
		margin-left: 1rem;
	}
	
</style>
